<template>
    <div class="level">
        <h1>医院</h1>
        <div class="content">
            <div class="left">等级:</div>
            <ul class="hospital">
                <li :class="{ active: activeFlag == '' }" @click="changeLevel('')">全部</li>
                <li v-for="level in levelArr" :class="{ active: activeFlag == level.value }" :key="level.value"
                    @click="changeLevel(level.value)">{{ level.name }}</li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { HospitalLevelAndRegionArr } from "@/api/home/type";
import { reqHospitalLevelAndRegion } from "@/api/home";
//控制医院等级高亮响应式数据
let activeFlag = ref<string>('');
let levelArr = ref<HospitalLevelAndRegionArr>();

onMounted(() => {
    getLevel();
});

// 获取医院等级数据
const getLevel = async () => {
    await reqHospitalLevelAndRegion("HosType").then(res => {
        levelArr.value = res.data;
    })
};

const changeLevel = (level: string) => {
    activeFlag.value = level;
    // 触发自定义事件：将等级参数回传给父组件getLevel
    $emit("getLevel", level);
};

let $emit = defineEmits(["getLevel"]);
</script>

<style lang="scss" scoped>
.level {
    color: #7f7f7f;
    margin: 10px 0;

    h1 {
        font-weight: 900;
        margin: 10px 0px;
    }

    .content {
        margin-top: 20px;
        display: flex;
        justify-content: left;
        font-size: 14px;

        .left {
            margin-right: 10px;
            width: 10%;
            max-width: 40px;
        }

        .hospital {
            display: flex;
            flex-wrap: wrap;

            li {
                margin-right: 10px;
                margin-bottom: 10px;
                cursor: pointer;

                &:hover {
                    color: #55a6fe;
                }

                &.active {
                    color: #55a6fe;
                }
            }
        }
    }
}
</style>